<template>
  <section class="component work-task">
    <span @click="dialog.taskBox=true" class="icon" style="margin-right:20px">
      <svg-icon iconName="renwuhezi" iconSize="32"></svg-icon>
    </span>
    <el-dialog width="1000px" :visible.sync="dialog.taskBox" title="任务中心" @open="updateTaskList([])">
      <task-box :visible.sync="dialog.taskBox" ref="task-box"></task-box>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State, Mutation, Action, namespace } from "vuex-class";
import TaskBox from "~/components/workspace/task/task-box.vue";
import SvgIcon from "~/components/common/svg-icon.vue";
import { Dependencies } from "~/core/decorator";
import { ReminderService, ReminderMessageType } from "~/utils/reminder.service"
const workspaceModule = namespace("workspace");

@Component({
  components: {
    TaskBox,
    SvgIcon
  }
})
export default class WorkTask extends Vue {
  @workspaceModule.Action private updateUnReadCount;
  @workspaceModule.State private unReadCount;
  @workspaceModule.State private taskList;
  @workspaceModule.Mutation private updateTaskList
  private dialog = {
    taskBox: false
  };

  private mounted() {
    // 收到消息通知时更新未读消息
    ReminderService.getInstance()
      .addListener(ReminderMessageType.Task)
      .subscribe(data => {
        this.updateUnReadCount()
      })
  }
}
</script>

<style lang="less" scoped>
.component.work-task {
  margin-right: 20px;
  .icon {
    color: white;
    cursor: pointer;
  }
}
</style>
